<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>环形</title>
		<style type="text/css">
			body,ul{margin: 0;padding: 0;}
			:root{background: black;}
			img{display: block;}
			.box{position: relative;margin: 100px auto;width: 200px;perspective: 1800px;}
			ul{width:133px;height:400px;border: 1px solid red;position: absolute;transform-style:preserve-3d;animation: xz 10s infinite linear;}
			@keyframes xz{
				from{transform: rotateY(0);}
				to{transform: rotateY(360deg);}
			}
			ul li{list-style: none;width: 133px;height: 200px;position: absolute;margin: 100px 0;}
			ul li:nth-child(1){transform: rotateY(0deg) translateZ(300px);}
			ul li:nth-child(2){transform: rotateY(30deg) translateZ(300px);}
			ul li:nth-child(3){transform: rotateY(60deg) translateZ(300px);}
			ul li:nth-child(4){transform: rotateY(90deg) translateZ(300px);}
			ul li:nth-child(5){transform: rotateY(120deg) translateZ(300px);}
			ul li:nth-child(6){transform: rotateY(150deg) translateZ(300px);}
			ul li:nth-child(7){transform: rotateY(180deg) translateZ(300px);}
			ul li:nth-child(8){transform: rotateY(210deg) translateZ(300px);}
			ul li:nth-child(9){transform: rotateY(240deg) translateZ(300px);}
			ul li:nth-child(10){transform: rotateY(270deg) translateZ(300px);}
			ul li:nth-child(11){transform: rotateY(300deg) translateZ(300px);}
			ul li:nth-child(12){transform: rotateY(330deg) translateZ(300px);}
		</style>
	</head>
	<body>
		<div class="box">
			<ul>
				<li><img src="img/h1.jpg"/></li>
				<li><img src="img/h2.jpg"/></li>
				<li><img src="img/h3.jpg"/></li>
				<li><img src="img/h4.jpg"/></li>
				<li><img src="img/h5.jpg"/></li>
				<li><img src="img/h6.jpg"/></li>
				<li><img src="img/h7.jpg"/></li>
				<li><img src="img/h8.jpg"/></li>
				<li><img src="img/h9.jpg"/></li>
				<li><img src="img/h10.jpg"/></li>
				<li><img src="img/h11.jpg"/></li>
				<li><img src="img/h9.jpg"/></li>
			</ul>
		</div>
	</body>
</html>
